<template>
  <!-- 表格 -->
  <Grid>
    <!-- 表格操作 -->
    <template #toolbar-tools>
      <vxe-button status="primary">按钮1</vxe-button>
      <vxe-button status="primary">按钮2</vxe-button>
      <vxe-button status="primary">按钮3</vxe-button>
    </template>
    <template #toolbar-buttons>
      <vxe-button status="primary">按钮1</vxe-button>
      <vxe-button status="primary">按钮2</vxe-button>
      <vxe-button status="primary">按钮3</vxe-button>
    </template>
    <!-- 使用 toolbar-buttons 插槽添加自定义按钮 -->
  </Grid>
</template>

<script setup lang="ts" name="FosoTable">
// 引入props定义
import type { FosoTableProps } from './props';

import { fosoTableDefaults } from './props';

// 引入表格与类型
import { useVbenVxeGrid } from '#/adapter/vxe-table';

// 引入删除图标

// 使用withDefaults定义props
const props = withDefaults(defineProps<FosoTableProps>(), fosoTableDefaults);
// 表格配置项

// 表格事件
const gridEvents = {};

// 表格实例
const [Grid, gridApi] = useVbenVxeGrid({
  gridEvents,
  gridOptions: {
    columns: props.columns as any,
    size: 'medium',
    data: [{ name: '123' }],
    rowConfig: {
      // drag: true, // 启用拖拽排序
      isHover: true, // 开启悬浮行高亮
    },
    autoResize: true, // 启用自动调整大小
    keepSource: true,
    exportConfig: {},
    pagerConfig: {
      pageSize: 20, // 每页显示的行数
    },

    toolbarConfig: {
      custom: true,
      export: true,
      import: true,
      refresh: true,
      slots: {
        buttons: 'toolbar-buttons',
      },
      zoom: true,
    },

    border: true,
    checkboxConfig: {
      highlight: true,
    },
  },
});
defineExpose({
  gridApi,
});
</script>
<style scoped lang="scss">
// 添加toolbar 和query 区间的padding
:deep(.vxe-toolbar) {
  padding-top: 5px !important;
}
</style>
